<template>
  <div id="page-yearplan">
    <h2>会员类别</h2>

    <card class="mt10">
      <div class="m10 clearfix">
        <Button type="info" class="fr" @click="showCreateModal()">新增会员类别</Button>
      </div>

      <Table
        :columns="columns"
        :data="list"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>
    </card>

    <update-modal :form="form" @submit="getList()"></update-modal>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import vipApi from '@/api/vip'
  import updateModal from './components/type/update-modal'

  export default {
    name: 'page-yearplan',
    components: {
      updateModal
    },
    data () {
      return {
        loading: false,
        query: {
          pkRcId: null
        },
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 50,
            render: (h, params) => {
              return params.row._index + 1
            }
          },
          {
            title: '类别名称',
            align: 'center',
            width: 200,
            key: 'memberTypeName'
          },
          {
            title: '积分倍数',
            align: 'center',
            key: 'scoreTimes',
            width: 80
          },
          {
            title: '描述',
            align: 'center',
            key: 'memberTypeMemo'
          },
          {
            title: '是否外网显示',
            align: 'center',
            width: 120,
            render: (h, params) => {
              let { row } = params
              return !row.isEnable ? '显示' : '不显示'
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 130,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showUpdateModal(params.row)
                    }
                  }
                }, '编辑')
                // ,
                // h('Button', {
                //   props: {
                //     type: 'error',
                //     size: 'small'
                //   },
                //   style: {
                //     marginRight: '5px'
                //   },
                //   on: {
                //     click: () => {
                //       this.onRemove(params.row)
                //     }
                //   }
                // }, '')
              ])
            }
          }
        ],
        list: [],
        form: {
          visible: false,
          data: {},
          template: {
            scoreTimes: 0
          }
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      showUpdateModal (detail) {
        this.form.data = Object.assign({}, detail)
        this.form.visible = true
      },
      async getList () {
        this.loading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.typeList(this.query)
        const { responseData } = body
        if (!this.$apiHelper.requestSuccessed(body.responseCode)) {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
        this.loading = false
        this.list = responseData
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  #page-vip {}
</style>
